<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Page</title>
    <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
</head>
<script type="text/javascript" src="{{ asset('js/popper.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-3.7.1.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.3.js')}}"></script>
<body class="main-view">
</body>
<script>

    // 假设我们有一个函数来添加监听器
    function addClickListener(div) {
        if (div) {
            div.addEventListener('click', function (event) {
                console.log('div clicked'+event.target.id);
                // 阻止事件冒泡
                event.stopPropagation();
                // 阻止默认行为（如果需要）
                event.preventDefault();
                // 设置数据属性以标记 div 已绑定监听器
                this.dataset.hasListener = 'true';
                let parts = this.className.split(' '); // 使用空格作为分隔符
                let firstPart = parts[0]; // 获取第一个部分
                // 构建要发送的数据
                let data = {
                    type: 'div-clicked',
                    divId: this.id, // 如果 div 有唯一的 ID
                    data: this.outerHTML, // 获取 div 的内容
                    // index: index, // 获取 div 的索引
                    className: firstPart,
                };
                // 发送消息到主页面
                window.parent.postMessage(data, '*'); // 注意：'*' 允许所有来源，但出于安全考虑，应指定确切的来源
            });
        }
    }

    $(document).ready(function () {

        //绑定元素拖动监听
        // $(".main-view").sortable({
        //     start: function() {
        //         console.log("start")
        //     },
        //     drag: function() {
        //         console.log("start")
        //     },
        //     stop: function() {
        //         console.log("start")
        //     }
        // })
    })
    window.addEventListener('message', function (event) {
        // 检查消息类型，如果是添加进来了的元素，则添加监听器
        if (event.data.type === 'addClickListener') {
            // 选择所有ID以"view-"开头的div元素
            let viewDivs = document.querySelectorAll('div[id^="view-"]');
            // 为每个选中的div元素添加点击监听器
            viewDivs.forEach(function(div) {
                addClickListener(div);
            })
            //     let clickableDivs = document.getElementById(event.data.viewId);
            // if(clickableDivs){
            //     console.log('addClickListener')
            //     addClickListener(clickableDivs); // 使用函数来添加监听器
            // }
        }
    }, false);
</script>
<style>
    .dd {
        border: 1px solid #ccc;
    }

    .view-div {
        border: 1px solid #ccc;
        min-height: 50px;
    }

    /* 拖拽元素占位符 */
    .ui-state-highlight {
        border: 1px dashed #ddd;
        background-color: black;
        width: auto;
        min-height: 10px;
    }

    /*选中组件后样式*/
    .view-div-ui-selected {
        border: 1px dashed #ddd;
        background-color: lawngreen;
    }
</style>
</html>
